<template>
	<!-- 项目信息管理详情页 -->
	<div class="pjInfoMngDetailPage">
		<CommonTitle titleName="项目概况" class="d-flex a-end">
			<template #rightCnBox>
				<div class="titleRight d-flex m-l10">
					<el-divider direction="vertical" />
					<span>{{ projectInfo.parentProjectName }}</span>
					<el-divider direction="vertical" />
					<span>{{ projectInfo.projectName }}</span>
					<el-divider direction="vertical" />
					<span>项目编号：{{ projectInfo.projectId }}</span>
				</div>
			</template>
		</CommonTitle>

		<!--  基本信息    -->
		<div class="baseInfo">
			<span>基本信息</span>
			<el-card class="box-card m-t10 d-flex flex-column j-sb" shadow="never">
				<div class="tag-wrap d-flex j-sb">
					<div
						class="tag-item-box d-flex a-center"
						v-for="(item, index) in projectStatistics"
						:key="index"
					>
						<svg-icon :icon-class="item.iconName" class="tag-icon" />
						<div
							class="tag-item-right-box d-flex flex-column"
							:class="[item.type === 2 ? 'm-l20' : 'm-l10']"
						>
							<span v-if="item.type === 1">{{ item.num }}</span>
							<span v-else>{{ item.subTitle }}</span>
							<span>{{ item.titleName }}</span>
						</div>
					</div>
				</div>
				<div class="project-form-info-box m-t10">
					<el-form>
						<el-row>
							<el-col :span="24">
								<el-form-item label="项目位置">
									<el-input
										v-model="projectInfo.address"
										placeholder="回显"
										disabled
									></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row class="d-flex a-center j-sb">
							<el-col :span="11">
								<el-form-item label="项目来源">
									<el-input
										v-model="projectInfo.projectSource"
										placeholder="《xxxxxxxxxxxxxxxx请示》"
										disabled
									></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="11">
								<el-form-item label="项目主责部门" label-width="170px">
									<el-input
										v-model="projectInfo.responsibleDepartment"
										placeholder="回显"
										disabled
									></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row class="d-flex a-center j-sb">
							<el-col :span="11">
								<el-form-item label="配合部门">
									<el-input
										v-model="projectInfo.cooperateDepartment"
										placeholder="招标合约部、综合部、金融财务部"
										disabled
									></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="11">
								<el-form-item
									label="本项目招标实施团队配置"
									label-width="170px"
								>
									<el-input
										v-model="projectInfo.implementationTeam"
										placeholder="张三、李四、王五"
										disabled
									></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</el-card>
		</div>

		<!--  项目实施阶段    -->
		<div class="flow-path-wrap m-t50 d-flex j-sb">
			<floe-chart class="m-r40">
				<shrink-menu-group :taskName="taskName" @change="change" :list="list" />
			</floe-chart>
			<detail-info
				:class="[isShow ? 'show' : 'hide']"
				ref="detailInfoRef"
				:data="currentRow"
				@onAppointedTaskUser="onAppointedTaskUser"
			/>
		</div>

		<div class="gantt-wrap m-t40">
			<div class="m-b20">
				<span>招标项目任务实施时间甘特图</span>
			</div>
			<ganttChart
				type="项目管理"
				v-if="tasks.length > 0"
				:ganttList="tasks"
			></ganttChart>
		</div>
	</div>

	<public-dialog
		:title="'招标项目任务派发'"
		:width="'30%'"
		v-model:visible="visible"
		@onConfirm="onConfirm"
	>
		<div class="public-dialog-content d-flex j-center a-center">
			<span class="m-r10">请选择任务的实施人员</span>
			<el-select v-model="allotUserId">
				<el-option
					v-for="(item, index) in allotUsers"
					:key="index"
					:value="item.userId"
					:label="item.userName"
				></el-option>
			</el-select>
		</div>
	</public-dialog>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import CommonTitle from "@/components/CommonTitle";
import FloeChart from "@/views/tenderProjectManage/projectManage/components/flowChart";
import DetailInfo from "@/views/tenderProjectManage/projectManage/components/detailInfo";
import {
	ElDivider,
	ElCard,
	ElRow,
	ElCol,
	ElForm,
	ElFormItem,
	ElSelect,
	ElOption,
	ElMessage,
} from "element-plus";
import { useRouter } from "vue-router";
import { projectInfoApi } from "@/api/biddingProject";
import ShrinkMenuGroup from "@/views/tenderProjectManage/projectManage/components/ShrinkMenuGroup";
import ganttChart from "@/views/tenderProjectManage/taskManage/components/gantt_chart.vue";
import PublicTable from "@/components/PublicTable";
import PublicDialog from "@/components/PublicDialog";
import { GetDateDiff } from "@/common/utils/GlobalUtils";

const projectStatistics = ref([]);
const taskName = ref("");

const router = useRouter();
const projectId = router.currentRoute.value.params.projectId;

const tasks = ref([]);
const page = reactive({
	total: 0,
	current: 1,
	size: 50,
});
const tableOption = ref([
	{ label: "项目实施阶段 ", prop: "projectName", overHidden: false },
	{ label: "招标任务 ", prop: "taskName", overHidden: false },
	{ label: "工期 ", prop: "duration", overHidden: false },
]);

// 查询项目信息
const projectInfo = ref({});
const getProjectInfo = () => {
	let p1 = projectInfoApi.getProjectInfo(projectId);
	let p2 = projectInfoApi.getTaskCount(projectId);
	Promise.all([p1, p2]).then((res) => {
		projectInfo.value = res[0].data;
		projectStatistics.value.push({
			iconName: "project-detail-icon-5",
			titleName: "招标项目数量",
			num: res[1].data.taskTenderNum,
			type: 1,
		});
		//  projectStatistics.value.push({
		//      iconName:'project-detail-icon-6',
		//      titleName:'拟计划',
		//      num:res[1].data.proposedPlanNum,
		//      type:1
		//  });
		projectStatistics.value.push({
			iconName: "project-detail-icon-3",
			titleName: "待派发",
			num: res[1].data.distributedNum,
			type: 1,
		});
		projectStatistics.value.push({
			iconName: "project-detail-icon-2",
			titleName: "待配置",
			num: res[1].data.configuredNum,
			type: 1,
		});
		projectStatistics.value.push({
			iconName: "project-detail-icon-4",
			titleName: "未开始",
			num: res[1].data.incompleteNum,
			type: 1,
		});
		projectStatistics.value.push({
			iconName: "project-detail-icon-7",
			titleName: "进行中",
			num: res[1].data.progressNum,
			type: 1,
		});
		projectStatistics.value.push({
			iconName: "project-detail-icon-1",
			titleName: "已完成",
			num: res[1].data.completedNum,
			type: 1,
		});
		projectStatistics.value.push({
			iconName: "project-detail-icon-10",
			titleName: "项目整体实施周期",
			subTitle: `${res[0].data.predictStartTime} 至 ${res[0].data.predictEndTime}`,
			num: res[1].data.proposedPlanNum,
			type: 2,
		});
	});
};

const list = ref([]);
const getProjectFacilitiesPhasePlan = () => {
	projectInfoApi.getProjectFacilitiesPhasePlan(projectId).then((res) => {
		res.data.forEach((item) => {
			item.pid = 0;
			item.isOpen = item.list.length > 0;
		});
		list.value = res.data;
		change(list?.value[0]?.subProjectTaskVoList[0]);
		taskName.value = list?.value[0]?.subProjectTaskVoList[0]?.taskName || "";
	});
};

const detailInfoRef = ref(null);
const currentRow = ref(null);
const isShow = ref(false);
const change = (e) => {
	console.log("---e--", e);
	if (!e) {
		return;
	}
	taskName.value = e.taskName;
	currentRow.value = e;
	detailInfoRef.value.getData(e);
	detailInfoRef.value.getProjectTaskInfo(e.projectTaskId);
	isShow.value = true;
};

const getProjectInfoTaskList = () => {
	projectInfoApi.getProjectInfoTaskList(projectId).then((res) => {
		// tasks.value = res.data;
		tasks.value = res.data.map((v) => {
			const obj = {
				taskName: v.projectStageName,
				text: v.taskName,
				nodeName: v.taskName,
				duration: v.duration,
				start_date: new Date(filtersTime(v.predictStartTime) + " 00:00:00"),
				// end_date: new Date(v.predictEndTime),
			};
			return obj;
		});
	});
};
const filtersTime = (time) => {
	return time ? time.slice(0, 10) : "0000-00-00";
};
const getAllotUsers = (projectTaskId, callback) => {
	projectInfoApi.getAllotUsers(projectTaskId).then((res) => {
		if (res.code === "200" && callback) {
			callback(res.data);
		}
	});
};

const allotUsers = ref([]);
const visible = ref(false);
const onAppointedTaskUser = () => {
	allotUserId.value = detailInfoRef.value.taskInfo.responsibleUserName;
	getAllotUsers(currentRow.value.projectTaskId, (data) => {
		visible.value = true;
		allotUsers.value = data;
	});
};

const tenderTaskAllot = (param) => {
	projectInfoApi.tenderTaskAllot(param).then((res) => {
		if (res.code === "200") {
			ElMessage.success("指定实施人员成功!");
			visible.value = false;
		}
	});
};

const allotUserId = ref("");
const onConfirm = () => {
	if (allotUserId.value.trim() === "") {
		ElMessage.warning("请选择实施人员!");
		return;
	}
	tenderTaskAllot({
		userId: allotUserId.value,
		projectTaskId: currentRow.value.projectTaskId,
	});
};

onMounted(() => {
	getProjectInfo();
	getProjectFacilitiesPhasePlan();
	getProjectInfoTaskList();
});
</script>

<style lang="scss" scoped>
.public-dialog-content {
	span {
		font-size: 14px;

		font-weight: 400;
		color: #1a1a1a;
	}
}
.pjInfoMngDetailPage {
	.baseInfo {
		.box-card {
			.tag-wrap {
				.tag-item-box {
					min-width: 139px;
					height: 59px;
					background: #ffffff;
					box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.05);
					border-radius: 8px;
					padding: 0 15px;

					.tag-icon {
						width: 24px;
						height: 24px;
					}

					.tag-item-right-box {
						span:first-child {
							font-size: 14px;

							font-weight: 500;
							color: #1a1a1a;
						}
						span:last-child {
							margin-top: 6px;
							font-size: 12px;

							font-weight: 400;
							color: #999999;
						}
					}
				}
			}
		}
		.project-form-info-box {
			.el-form {
				.el-form-item {
					margin-bottom: 0px !important;
					margin-top: 15px;

					:deep(.el-form-item__label) {
						font-size: 14px;
						font-weight: 600;
						color: #1a1a1a;
					}
				}
			}
		}
	}

	.flow-path-wrap {
		width: 100%;
		.show {
			transition: all 0.9s;
			width: 100% !important;
			height: auto !important;
			overflow: auto !important;
		}
		.hide {
			transition: all 0.9s;
			width: 0px !important;
			height: 0px !important;
			overflow: hidden !important;
		}
	}
}
</style>
